/*
 * @Descripttion:
 * @Author: voanit
 * @Date: 2022-05-15 08:55:58
 * @LastEditors: voanit
 * @LastEditTime: 2022-05-16 15:06:57
 */
import { useState, useEffect } from 'react'
// 2 在 Login 页面组件中，使用 antd 的 Button 组件
import { Button, Card, Form, Input, Checkbox, message } from 'antd'
// import request from '@/utils/request.js'
import logo from '@/assets/images/logo.png'
import styles from './index.module.scss'
import { useHistory } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import { actionLogin } from '@/store/actions/login'
// console.log(obj, 99)
const Login = (props) => {
  console.log(props, 77)
  const [loading, setLoading] = useState(false)
  const info = useSelector((state) => {
    return state.login
  })

  const dispatch = useDispatch()
  const history = useHistory()
  console.log(history, 1199)
  const onFinish = (initialValues) => {
    setLoading(true)
    // 点击登录按钮
    try {
      dispatch(actionLogin(initialValues))
      message.success('登录成功', 1, () => {
        // 实现页面跳转
        history.push(
          (props.location.state && props.location.state.from) || '/layout'
        )
        setLoading(false)
      })
    } catch (error) {
      message.error('登录失败')
    } finally {
      // setLoading(false)
    }
  }
  return (
    <div className={styles.root}>
      <Card className="login-container">
        <img className="login-logo" src={logo} alt="" />
        {/* 登录表单 */}
        {/* 表单 */}
        {/* <Form validateTrigger={['onBlur', 'onChange']}> */}
        <Form
          autoComplete="on"
          size="large"
          validateTrigger={['onBlur']}
          initialValues={{
            agree: true,
            mobile: '13811111111',
            code: '246810',
          }}
          onFinish={onFinish}
        >
          <Form.Item
            name="mobile"
            rules={[
              {
                pattern:
                  /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
                message: '错误提示',
              },
              { required: true, message: '错误提示' }, // 必须要填
            ]}
          >
            <Input placeholder="请输入手机号" />
          </Form.Item>

          <Form.Item
            name="code"
            rules={[
              { len: 6, message: '验证码6个字符', validateTrigger: 'onBlur' },
              { required: true, message: '请输入验证码' },
              {
                validator: function (rule, value) {
                  // console.log(rule, value, 99)
                  if (value.trim().length >= 6) {
                    return Promise.resolve()
                  } else {
                    return Promise.reject(new Error('请输入6位及以上字符'))
                  }
                },
              },
            ]}
          >
            <Input placeholder="请输入验证码" />
          </Form.Item>

          <Form.Item name="agree" valuePropName="checked">
            <Checkbox>我已阅读并同意[隐私条款]和[用户协议]</Checkbox>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" block loading={loading}>
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}

export default Login
